<template>
  <div class="pv">
    <div class="pv_item_title">非模块化使用</div>
    <div class="pv_operate">
      <a-button @click="resetFn('first')">修改pinia中state的值</a-button>
      <a-button @click="getFn()" style="margin-left: 10px"
        >通过get获取pinia中state的值</a-button
      >
      <a-button @click="resetFn('second')" style="margin-left: 10px"
        >修改pinia中state的值2nd</a-button
      >
      <a-button @click="resetFn('third')" style="margin-left: 10px"
        >修改pinia中state的值3rd</a-button
      >
      <a-button @click="resetFn('fouth')" style="margin-left: 10px"
        >重置pinia中state的值</a-button
      >
      <span class="pvo_text">按钮</span>
    </div>
    <div class="pv_">
      <div class="pv_title">非模块化使用展示</div>
      <div class="pv_item">
        <span v-text="'user: ' + user.name + '-----' + user.age"></span>
      </div>
      <div class="pv_item" style="margin: 0">
        <span v-text="'name: ' + name"></span>
      </div>
    </div>
    <div class="pv_item_title top_margin">模块化使用</div>
    <div class="pv_operate">
      <a-button @click="resetFn2('fir')">修改pinia中state的值</a-button>
      <a-button @click="getFn2()" style="margin-left: 10px"
        >通过get获取pinia中state的值</a-button
      >
      <a-button @click="resetFn2('sec')" style="margin-left: 10px"
        >重置pinia中state的值</a-button
      >
    </div>
    <div class="pv_">
      <div class="pv_title">模块化使用展示</div>
      <div class="pv_item" style="margin: 0">
        <span
          v-text="'school: ' + school.area + '-----' + school.areaNo"
        ></span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 单个使用pinia
import { useCounterStore } from "@/stores/pianademo";
import { storeToRefs } from "pinia";
// 模块化使用pinia
import useStore from "@/stores";

// 获取state的值 单个
const user = useCounterStore();
// 使用解构配合pinia的storeToRefs(单独结构会失去响应式)
const { name } = storeToRefs(user);

const resetFn = (type: String): void => {
  if (type === "first") {
    user.updateUserInfo("李四", Math.round(Math.random() * 99 + 1));
  } else if (type === "second") {
    user.setName("王五").then((res) => {
      user.updateUserInfo(res as string, Math.round(Math.random() * 99 + 1));
    });
  } else if (type === "third") {
    user.setAllInfo("周六", Math.round(Math.random() * 99 + 1));
  } else if (type === "fouth") {
    user.$reset();
  }
};

const getFn = () => {
  console.log(user.getFullInfo);
};

// 监听state $subscribe
// user.$subscribe(
//   (args, state) => {
//     console.log(args);
//     console.log(state);
//   },
//   {
//     detached: true, // 组件卸载之后是否可以调用
//   }
// );

// 监听action $onAction
// const actionWatch = user.$onAction((args) => {
//   console.log(args);
// });
// console.log(actionWatch);

// 模块化
const school = useStore().school();

const resetFn2 = (type: string) => {
  if (type === "fir") {
    school.setAn0therSchool("哈哈", 16);
  } else {
    school.$reset();
  }
};
const getFn2 = () => {
  console.log(school.getFullInfo);
};
</script>

<style scoped lang="scss">
.pv {
  padding: 40px;
  .pv_operate {
    width: 100%;
    margin-bottom: 30px;
    .pvo_text {
      font-size: 12px;
      color: #999;
      margin-left: 20px;
    }
  }
  .pv_item_title {
    margin-bottom: 20px;
    font-size: 18px;
    color: #000;
  }
  .top_margin {
    margin-top: 30px;
  }
  .pv_ {
    padding: 16px;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    position: relative;
    .pv_title {
      position: absolute;
      font-size: 12px;
      color: #999;
      width: auto;
      padding: 10px 6px;
      background: #fff;
      z-index: 2;
      top: -23px;
      left: 10px;
    }
    .pv_item {
      padding: 0 6px;
      margin-bottom: 10px;
    }
  }
}
</style>
